<template>
     <view>

		<view class="tabs">
			<view class="search-box">
				<view class="userhead">
					<button type="primary" size="mini" @click="addOwner">新增<uni-icons type="plusempty" color="white" size="10"></uni-icons></button>
					<button type="primary" style="margin-left: 10px;" size="mini" @click="showDrawer">查询<uni-icons type="search" color="white" size="10"></uni-icons></button>
				</view>
				<view class="search">
					<view>
						<uni-search-bar placeholder="编号" :radius="100" v-model="parameter.no" bgColor="#EEEEEE" @blur="search" />
					</view>
					
				</view>
				
			</view>
			<uni-drawer ref="showRight" mode="right" @change="change($event,'showRight')">
								<view class="close">
									<button @click="closeDrawer('showRight')"><text class="word-btn-white">关闭Drawer</text></button>
								</view>
								<view style="margin-top: 10px;">
									<uni-row :gutter="16">
										<uni-col :span="6">
											<view style="margin-left: 10px;margin-top: 5px;">
												<span style="font-size: 14px;">姓名:</span>
											</view>
										</uni-col>
										
										<uni-col :span="16">
											<uni-easyinput v-model="parameter.name" type="text" placeholder="姓名" />
										</uni-col>
										</uni-row>
										<view style="margin-top:10px">
											<uni-row :gutter="16">
												<uni-col :span="6">
													<view style="margin-left: 10px;margin-top: 5px;">
														<span style="font-size: 14px;">编号:</span>
													</view>
												</uni-col>
												
												<uni-col :span="16" >
													<uni-easyinput v-model="parameter.no" type="text" placeholder="编号" />
												</uni-col>
												</uni-row>
										</view>
										
										<view class="add-div">
											<uni-row :gutter="16">
												<uni-col :span="12">
													<view style="margin: 10px;">
														<button type="primary" @click="SelectClear">清空</button>
													</view>
													
												</uni-col>
												
												<uni-col :span="12">
													<view style="margin: 10px;">
														<button type="primary" @click="SelectData">查询</button>
													</view>
												</uni-col>
											</uni-row>
										</view>

								</view>
							</uni-drawer>
			
		
		</view>
			<view class="line" style="clear:both;"></view>
		 <view class="list">
			 
				 
						<uni-card  v-for="(item,index) in ownerList" :key="item.id"  padding="10px 0" :thumbnail="avatar" >
										
										<template v-slot:title>
															<uni-list>
																<uni-list-item :title="item.name">
																	<template v-slot:footer>

																		<view>
																			<uni-tag text="编辑+" type="primary" @click="editOwner(item)"></uni-tag>
																		</view>
																		
																	</template>
																	</uni-list-item>
																
																
															</uni-list>
														</template>	
										<view>
											
											<text class='owner-type'>编号:</text><text class='owner-data'>{{item.no}}</text><br>
											<text class='owner-type'>联系电话:</text><text class='owner-data'>{{item.tel}}</text><br>
											<text class='owner-type'>房屋坐落:</text><text class='owner-data'>{{item.houseLocation}}</text><br>
											<text class='owner-type'>户籍住址:</text><text class='owner-data'>{{item.censusRegister}}</text><br>
										</view>
										
										<view slot="actions" class="card-actions">
											
											<view class="card-actions-item" @click="Jump('../detail/index',item)">
												<uni-icons type="person-filled" size="18" color="#1890ff"></uni-icons>
												<text class="card-actions-item-text">详情</text>
											</view>
											<view class="card-actions-item" @click="Jump('../estimate/index',item)">
												<uni-icons type="folder-add-filled" size="18" color="#1890ff"></uni-icons>
												<text class="card-actions-item-text">评估</text>
											</view>
											<view class="card-actions-item" @click="sign('../owner/signature',item)">
												<uni-icons type="wallet-filled" size="18" color="#1890ff"></uni-icons>
												<text class="card-actions-item-text">签名</text>
											</view>
										</view>
									</uni-card>
									

			 <uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
			 
			 <view>
			 			<!-- 普通弹窗 -->
			 			<uni-popup ref="popup" background-color="#fff">
			 				<view class="quote">
			 					<!-- <view class="quote-title">算一算我家装修需要多少钱？</view> -->
			 					<view>
									
									<view v-show="isEdit">
										<button type="warn" size="mini" @click="deleteOwner(model)">删除</button>
										</view>
			 					       <!-- <uni-segmented-control style="border-color:#999" :current="current" :values="items" @clickItem="onClickItem" styleType="button" activeColor="#00ae66"></uni-segmented-control> -->
			 					        <view class="content">
			 								<view style="margin-top:10px;margin-bottom: 10px;">
			 									 <uni-easyinput v-model="model.name" placeholder="请输入产权人姓名"></uni-easyinput>
			 								</view>
											<view style="margin-top:10px;margin-bottom: 10px;">
												 <uni-easyinput v-model="model.no" placeholder="请输入编号"></uni-easyinput>
											</view>
											<view style="margin-top:10px;margin-bottom: 10px;">
												 <uni-easyinput v-model="model.tel" placeholder="请输入联系电话"></uni-easyinput>
											</view>
											<view style="margin-top:10px;margin-bottom: 10px;">
												 <uni-easyinput v-model="model.houseLocation" placeholder="请输入房屋坐落"></uni-easyinput>
											</view>
											<view style="margin-top:10px;margin-bottom: 10px;">
												 <uni-easyinput v-model="model.censusRegister" placeholder="请输入户籍地址"></uni-easyinput>
											</view>
											<view style="margin-top:10px;margin-bottom: 10px;">
												 <uni-easyinput v-model="model.livingAddress" placeholder="请输入现居住地"></uni-easyinput>
											</view>
			 							 <!-- <view style="margin-top:10px;margin-bottom: 10px;">
			 								  <uni-easyinput type="textarea" v-model="model.content" placeholder="留言内容"></uni-easyinput>
			 							  </view> -->
			 
			 							   <button class="button"  @click="submitSave()"><text class="button-text">保存</text></button>
			 					        </view>
			 					    </view>
			 				</view>
			 				
			 			</uni-popup>
			 		</view>
					
					<view>
								<!-- 普通弹窗 -->
								<uni-popup ref="sign" background-color="#fff">
									<view class="quote">
										<!-- <view class="quote-title">算一算我家装修需要多少钱？</view> -->
										<view>
										       <!-- <uni-segmented-control style="border-color:#999" :current="current" :values="items" @clickItem="onClickItem" styleType="button" activeColor="#00ae66"></uni-segmented-control> -->
										        <view class="content">
													<image :src="signPic" style="width: 100%;;" mode='widthFix' ></image>
													<button class="button"  @click="deleteSign()"><text class="button-text">删除</text></button>
										        </view>
										    </view>
									</view>
									
								</uni-popup>
							</view>
		 </view>
		
		 
		 
		 
     </view>
 </template>

<script>
export default {
	data() {
		return {
			  parameter:{page:1,pagesize:6,pid:0,from:'WX'},
			  status: 'more',
			  isMore: true,
			  type: 'center',
			  project: {},
			  signPic:"",
			  ownerList: [],
			  current: 0,
			  model:{},
			  isEdit:false,
			  contentText: {
			  	contentdown: '上拉加载更多',
			  	contentrefresh: '加载中',
			  	contentnomore: '没有更多'
			  },
			  options:[
			          {
			              text: '删除',
			              style: {
			                  backgroundColor: '#dd524d'
			              }
			          }
			        ]
		}
	},
	onLoad() {
		console.log('onload')
		this.GetProject()
		this.getData()
	},
	onShareAppMessage: function () {
	
	},
	onShow(){

		if(this.project.id != this.$storage.getJson('project').id){
			this.ownerList = []
			this.parameter.page = 1
			this.project = this.$storage.getJson('project')
			this.parameter.pid = this.project.id
			this.getData()
		}
		if (this.$storage.getData('refresh')=='1') {
			this.ownerList = []
			this.parameter.page = 1
			this.getData()
			this.$storage.setData('refresh','')
		}
	},
	onReachBottom() {
		if (this.isMore) {
			this.status = 'more';
			this.parameter.page++;
			this.getData();
		}
	},
	onPullDownRefresh() {
		this.ownerList = []
		this.parameter.page = 1
		this.GetProject()
		this.getData();
	 setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		deleteOwner () {
			var that = this
			uni.showModal({
			        	title: '提示',
			        	content: '你确定要删除吗',
			        	success: function (res) {
			        		if (res.confirm) {
			        			that.Delete(that.model.id)
								// console.log(that.model)
			        		} else if (res.cancel) {
			        			console.log('取消');
			        		}
			        	}
			        });
		},
		Delete(ids){
					  this.$request.postU(this.$api.owner.delete,{ids},'form').then(res=>{
							uni.showToast({
							title: '删除成功'
							}) 
							setTimeout(() =>{
											uni.reLaunch({
											    url: '../owner/index'
											});	
										}, 1000);
					  }); 
		},
		SelectClear(){
			this.parameter.name=''
			this.parameter.no = ''
		},
		SelectData(){
			this.$refs.showRight.close();
			this.ownerList = []
			this.parameter.page = 1
			this.getData();
		},
		showDrawer() {
						this.$refs.showRight.open();
					},
					closeDrawer() {
						this.$refs.showRight.close();
					},
		sign(url,item){
			if(item.signaturePath !=undefined && item.signaturePath != '[]' && item.signaturePath !=''){
				this.model = item
				var url = JSON.parse(this.model.signaturePath)
				this.signPic = this.$api.getUrl(url.url)
				this.$refs.sign.open('center')
			} else {
				this.Jump(url,item)
			}
		},
		Jump (url,record) {
			let path = url+"?hid="+record.id
			console.log(url,record,path)
			uni.navigateTo({
				url: path
			});
		},
		deleteSign(){
			this.model.signaturePath = '[]'
			this.isEdit = true
			this.submitSave()
		},
		search () {
			this.parameter.page = 1
			this.ownerList = []
			this.getData();
		},
		submitSave (){
			if(this.model.name==undefined || this.model.name == ""){
				uni.showToast({
				icon: "none",
				title: '产权人姓名不能为空'
				})
				return
			}
			if (!this.isEdit) {
				this.model.surveyUserID = this.$storage.getJson('user').userid
				this.model.surveyTime = new Date()
				console.log(this.model.surveyUserID,this.model.surveyTime)
				this.$request.postU(this.$api.owner.simpleadd,this.model).then(res=>{
					if(res.code==0) {
						uni.showToast({
						title: '新增成功'
						}) 
						setTimeout(() =>{
										uni.reLaunch({
										    url: '../owner/index'
										});	
									}, 1000);
								
					}
				});
			} else {
				this.$request.postU(this.$api.owner.updateOnlyOwner,this.model).then(res=>{
					if(res.code==0) {
						uni.showToast({
						title: '编辑成功'
						}) 
						setTimeout(() =>{
										uni.reLaunch({
										    url: '../owner/index'
										});			
									}, 1000);
						
					}
				});
			}
			
		},
		change(e,a){
			console.log(e,a)
		},
		toggle(type) {
						this.type = type
						// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
						this.$refs.popup.open(type)
					},
	    select(e){
			   console.log(e,this.parameter)
		   },
		   editOwner(record){
			   this.isEdit = true
			   this.model = record
			   this.toggle('center')
		   },
		   addOwner () {
			  this.isEdit = false
			  this.model = {censusRegister:this.project.address,houseLocation:this.project.address,livingAddress:this.project.address}
			  this.model.pid = this.project.id
			  this.model.status = 1
			  console.log('add', this.model)
			   this.toggle('center')
		   },
		   GetProject(){
			   // this.$storage.setData('refresh','1')
			   // this.$storage.getData('refresh')
			   var check = this.$storage.getJson('project')
			   if(check==undefined){
				   uni.showToast({
				   icon: "none",
				   title: '未选定项目'
				   })
				   setTimeout(function() {
				   			uni.switchTab({
				   				url:'/pages/project/index'
				   			})
				   		}, 2000);
			   } else {
				   this.project =this.$storage.getJson('project')
				   this.parameter.pid = this.project.id
			   }
		   },
		   getData:function(){
		   	this.status = 'loading';
		   	this.$request.postU(this.$api.owner.list,this.parameter).then(res=>{
		   		if(res.data.length > 0) {
		   			
		   			this.ownerList = this.ownerList.concat(res.data)
		   			if(this.ownerList.length < res.count) {
		   				this.status = 'more';
		   				this.isMore = true;
		   			} else {
		   				this.status = 'noMore';
		   				this.isMore = false;
		   			}
		   		} else {
		   			this.status = 'noMore';
		   			this.isMore = false;
		   		}
		   		
		   	});
		   }
		}
	}
</script>

<style>
	.add-div {
		position: fixed;
		bottom: 0px;
		font-size: 0;
		line-height: 0;
		z-index: 100;
		width: 100%;
	}
	.owner-type {
		font-size: 12px;
		font-weight: bold;
	}
	.owner-data {
		font-size: 12px;
	}
	.line{height: 10px;background: #fff;}
	.button {
		    background: #c79e68;
		    color: #FFF;
	}
	.quote {
	    padding: 20px 20px 10px 20px;
	    box-shadow: 0 0 10px #e4e4e4;
		width:250px
	}
	.quote-title{   
		width: 300px;
		background: #373737;
		color: #fff;
		font-size: 14px;
		border-radius: 5px;
		text-align: center;
		line-height: 40px;
		margin-bottom: 10px;
		padding: 0 10px;
		box-sizing: border-box;
	}
	.card-actions-item{
		display: flex;
		width:33.33%;
		justify-content: center;
		flex-direction: row;
		float: left;
	}
	.uni-list-item__content-title{
		font-size: 18px !important;
		font-family: Microsoft YaHei;
	}
	.card-actions-item-text{
		font-size: 14px;
		font-family: Microsoft YaHei;
		padding-top: 3px;
	}
 .content1{
     height: 60upx;
 }
 .input {
 		font-size: 18px;
 		border: 1px solid #DCDFE6;
 		border-radius: 4px;
 		padding: 6px 10px;
 		position: relative;
 		display: flex;
 		flex-direction: row;
 		align-items: center;
 	}
 
 	.scroll-h {
 		/*width: 750rpx;*/
 		/* #ifdef H5 */
 		width: 100%;
 		/* #endif */
 		height: 80rpx;
 		flex-direction: row;
 		/* #ifndef APP-PLUS */
 		white-space: nowrap;
 		/* #endif */
 		/* flex-wrap: nowrap; */
 		/* border-color: #cccccc;
 		border-bottom-style: solid;
 		border-bottom-width: 1px; */
 		margin-top: 10px;
 	}
	
 
 	.uni-tab-item {
 		/* #ifndef APP-PLUS */
 		display: inline-block;
 		/* #endif */
 		flex-wrap: nowrap;
 		/* padding-left: 15rpx; */
 		/* padding-right: 15rpx; */
 		width: 25%;
 		text-align: center;
 	}
 
 	.uni-tab-item-title {
 		color: #555;
 		font-size: 30rpx;
 		height: 80rpx;
 		line-height: 80rpx;
 		flex-wrap: nowrap;
 		text-align: center;
 		/* #ifndef APP-PLUS */
 		white-space: nowrap;
 		/* #endif */
 	}
 
 	.uni-tab-item-active {
 		border-bottom: 2px solid #1890ff;
 	}
 
 	.uni-tab-item-title-active {
 		color: #1890ff;
 	}
 
 	.cart-box {
 		position: relative;
 		height: 100rpx;
 		width: 100%;
 		margin-top: 0rpx;
 		border-bottom: 6rpx solid #f5f5f5;
 	}
 
 	.cart-box image {
 		position: absolute;
 		width: 80rpx;
 		height: 80rpx;
 		left: 20rpx;
 		top: 0rpx;
 		border-radius: 10rpx;
 	}
 
 	.cart-info {
 		width: 100%;
 		padding-left: 120rpx;
 		box-sizing: border-box;
 	}
 
 	.cart-name {
 		font-size: 28rpx;
 		height: 40rpx;
 	}
 
 	.cart-count {
 		position: absolute;
 		top: 10rpx;
 		right: -10rpx;
 	}
 
 	.cart-price {
 		color: #FF6600;
 		font-size: 24rpx;
 	}
 
 	.cart-price .price {
 		font-size: 32rpx;
 	}
 
 	.cart-check {
 		position: absolute;
 		top: 40rpx;
 		left: 10rpx;
 	}
	.list{

		margin-top: 50px;
	}
 	.tabs {
 		padding: 0;
 		width: 100%;
 		background: #fff;
 		position: fixed;
 		z-index: 99;
 		box-sizing: border-box;
 	}
 
 
 
 	.footer-box {
 		text-align: right;
 	}
 
 	.card-footer {
 		margin-bottom: 10rpx;
 	}
 
 	.search-box {
 		position: relative;
 		padding: 0 20rpx;
 	}
 
 	.search button {
 		width: 100%;
 	}
 
 	.userhead {
 		position: absolute;
 		top: 16rpx;
 		left: 20rpx;
 	}
 
 	.userhead image {
 		width: 65rpx;
 		height: 65rpx;
 		border-radius: 50%;
 	}
 
 	.userhead button {
 		padding: 0 20rpx;
 	}
 
 	.search {
 		padding-left: 300rpx;
 		box-sizing: border-box;
 		padding-top: 16rpx;
 	}
 
 	.search .uni-searchbar {
 		padding: 0 !important;
 	}
	.close {
		padding: 10px;
	}
 </style>
